<template>
  <div>
    <div
      v-for="item in albums"
      @click="toAlbumMsg(item.id)"
      :key="item.id"
      class="each-album"
    >
      <div class="each-album-pic">
        <img v-lazy="item.blurPicUrl" alt="" />
      </div>
      <div class="each-album-msg">
        <h3>
          {{ item.name }}
        </h3>
        <p>
          {{ new Date(item.publishTime).getFullYear() }}.{{
            new Date(item.publishTime).getMonth() + 1
          }}.{{ new Date(item.publishTime).getDate() }} 歌曲{{ item.size }}
        </p>
      </div>
    </div>
    <mu-infinite-scroll
      :loadingText="loadingText"
      :loading="loading"
      @load="() => fetchData().then()"
    />
  </div>
</template>

<script lang="ts">
import { APIType } from "@/api";
import { CommonIdType } from "@/model/id-or-enum.model";
import { Album } from "@/model/music-info.model";
import { Vue, Component } from "vue-property-decorator";
import Router from "vue-router";
import { Route } from "vue-router";
@Component({})
export default class ArtistAlbumComponent extends Vue {
  public albums: Album[] = [];
  public loading = false;
  public loadingText = "努力加载中...";

  $api: APIType;
  $router: Router;
  $route: Route;

  // 生命周期
  public mounted() {
    this.fetchData().then();
  }

  public async fetchData() {
    const offset = this.albums.length;
    this.loading = true;
    const result = await this.$api.getArtistAlbum(
      this.$route.params.id,
      offset
    );
    if (result.hotAlbums.length === 0) {
      this.loadingText = "已经加载所有数据";
      this.loading = false;
      return;
    }
    for (let album of result.hotAlbums) {
      this.albums.push(album);
    }
    this.loading = false;
  }

  public toAlbumMsg(id: CommonIdType) {
    this.$router.push({ path: `/album/${id}` }).catch((err) => err);
  }
}
</script>

<style lang="scss" scoped>
.each-album {
  display: flex;
  .each-album-pic {
    width: 1rem;
    height: 1rem;
    padding: 0.1rem;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .each-album-msg {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #999;
    > h3 {
      font-size: 0.25rem;
      font-weight: 400;
      color: black;
    }
    > p {
      font-size: 0.12rem;
      color: #999;
    }
  }
}
</style>
